/* eslint-disable no-unused-vars */
/* eslint-disable camelcase */
import React, { useEffect, useImperativeHandle, useState, forwardRef, useContext } from 'react';
import { Layout, message, Modal, Popconfirm, Table, Space, Tag, Button } from 'antd';
import DesignContext from '../designContext';
import DesignUtil from '../common/DesignUtil';
import ApiHelper from '../api';

const SubFormList = forwardRef((props, ref) => {
  const [showlist, setShowList] = useState(false);
  // const [edit, setEdit] = useState(null);
  const { subForms, setSubForms, useformData } = useContext(DesignContext);
  // const refEdit = useRef(null);

  useImperativeHandle(ref, () => ({ setShowList }));

  useEffect(() => {}, []);

  const deleteItem = function (index) {
    ApiHelper.deleteForm(
      useformData.formkey,
      {},
      (success) => {
        subForms.splice(index, 1);
        setSubForms([...subForms]);
      },
      (fail) => {},
    );
  };

  const columns = [
    {
      title: '子表单',
      dataIndex: 'form_name',
      key: 'form_name',
      render: (form_name) => <p>{form_name}</p>,
    },
    {
      title: '修改时间',
      dataIndex: 'update_time',
      key: 'update_time',
      render: (update_time) => <p>{DesignUtil.showDate(update_time)}</p>,
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record, index) => (
        <Space size="middle">
          <Button
            type="link"
            onClick={() => {
              deleteItem(index);
            }}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <>
      <Modal
        visible={showlist}
        mask={false}
        width={700}
        footer={
          <Button
            onClick={() => {
              setShowList(false);
            }}
          >
            确定
          </Button>
        }
        onCancel={() => {
          setShowList(false);
        }}
        title="子表单"
      >
        <Table columns={columns} rowKey="update_time" dataSource={subForms} />
      </Modal>
    </>
  );
});

export default SubFormList;
